<template>
	<view class="">
		<form @submit="formSubmit">
			<view class="list">
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label">
						所属项目
					</view>
					<view class="acea-row row-middle row-right item-r sanjiao-right">
						<chooseComp :dataform="dataform" placeholder="请选择项目" @change="(key,val)=>dataform[key]=val" />
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label label-m">
						地址
					</view>
					<view class="acea-row row-middle row-right item-r address">
						<input type="text" placeholder="请输入/选择地址" v-model="addres" name='addres'>
						<image src="../static/images/location.png" mode="" @click="clickMap"></image>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b" v-if="categoryOn!= 5">
					<view class="label">
						楼层
					</view>
					<view class="acea-row row-middle row-right item-r floor">
						<view class="">第</view>
						<input type="number" v-model="floor1">
						<view class="">层</view>
						<view class="margin-l">共</view>
						<input type="number" v-model="floor2">
						<view class="">层</view>
					</view>
				</view>
				<view class="acea-row row-middle row-between">
					<view class="acea-row row-middle row-between item border-b w-48">
						<view class="label label-m">产权面积</view>
						<view class="acea-row row-middle row-right small-ipt">
							<input type="number" placeholder="示例:30" placeholder-class="placeholder-class"
								v-model="bvileAvea" name='bvileAvea' @change="val=>avea=(avea?avea:val.detail.value)">
							<text>m²</text>
						</view>
					</view>
					<view class="acea-row row-middle row-between item border-b w-48">
						<view class="label label-m">使用面积</view>
						<view class="acea-row row-middle row-right small-ipt">
							<input type="number" @input="fillTitle" placeholder="示例:30"
								placeholder-class="placeholder-class" v-model="avea" name='avea'>
							<text>m²</text>
						</view>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label">
						单价
					</view>
					<view class="acea-row row-middle row-right item-r small-ipt">
						<input type="number" placeholder="示例:500" placeholder-class="placeholder-class"
							v-model="salemoney" name='salemoney' @change="jisuan" />
						<text>元</text>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label">总价</view>
					<view class="acea-row row-middle row-right item-r small-ipt">
						<input type="number" placeholder="示例:500" v-model="sellOunt" name='sellOunt'
							placeholder-class="placeholder-class">
						<text>元</text>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label">投资回报率</view>
					<view class="acea-row row-middle row-right item-r small-ipt">
						<input type="number" placeholder="示例:50" v-model="returnInvestment" name='returnInvestment'
							placeholder-class="placeholder-class">
						<text>%</text>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b " v-if="categoryOn!= 5">
					<view class="label label-m">
						商铺状态
					</view>
					<view class="acea-row row-middle row-right item-r sanjiao-right">
						<!-- <view class="no-data-r">请选择状态</view> -->
						<picker @change="shopChange" :value="shopIndex" :range="shopList" range-key="name">
							<view :class="shopName ?'' :'no-data-r'">{{shopName ? shopName : '请选择状态'}}</view>
						</picker>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label label-m">
						支付方式
					</view>

					<view class="acea-row row-middle row-right item-r sanjiao-right" @click="openPopupShow = true">
						<!-- <input class="input-r" type="text" placeholder="请选择支付方式" v-model="modePayment"
							name='modePayment' placeholder-class="placeholder-class" disabled> -->
						<payType v-model="dataform.payType" />
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label">
						标题
					</view>
					<view class="acea-row row-middle row-right item-r">
						<input class="input-r" type="text" placeholder="请输入标题" placeholder-class="placeholder-class"
							v-model="title" name='title' />
					</view>
				</view>
				<!-- 联系人 -->
				<view class="acea-row row-middle row-between item  ">
					<view class="label label-m">
						联系人
					</view>
					<view class="add-icon" @click="addContact">
						<image src="../static/images/add_icon.png" mode=""></image>
					</view>
				</view>
				<view class="item border-b">

					<chooseContact :list="contactList" :dataform="dataform" @add="d=>contactList.push(d)"
						@del="toDel" />
				</view>
				<!-- 商铺特点 -->
				<view class="module">
					<chooseKeywords title="商铺特点" :advantages="advantages" type="7" :typeOn="typeOn"
						:storeAdvantage="storeAdvantage" :advantageIds="advantageIds"
						@storeAdvantage="val=>(storeAdvantage=val)" @advantageIds="val=>(advantageIds=val)"
						@advantages="val=>(advantages=val)" />
				</view>
				<!-- 补充描述 -->
				<view class="module">
					<view class="module-title">
						描述
					</view>
					<view class="textacea-box">
						<textarea placeholder="请输入描述" v-model="details" :maxlength="maxLength"
							name='details'></textarea>
						<view class="num-text">
							{{details?details.length:0}}/{{maxLength}}
						</view>
					</view>
				</view>
				<!-- 上传照片/视频 -->
				<view class="module">
					<image-comp v-model="dataform.shopfrontPhoto"></image-comp>
				</view>
			</view>
			<!-- 按钮 -->
			<view class="acea-row row-between row-middle btns">
				<button class="white-btn" @click="status = 1" form-type="submit">继续完善</button>
				<button class="red-btn" @click="status = 2" form-type="submit">完成</button>
			</view>
		</form>
		<!-- <dictionaryType :gids="27" @clickOk="clickOk" :popupShow="openPopupShow" @popupClose="openPopupShow = false" /> -->
		<ImageInstance ref="ImageInstance"></ImageInstance>
		<addKeyWord ref="addKeyWord" @addConfirm="addConfirm" />
		<wordSearch ref="wordSearch" :list="projectList" keyName="name" keyId="id" v-model="projectId"
			@inChange="getProjectList" @name="(name)=> projectName = name" />
	</view>
</template>

<script>
	import {
		Debounce
	} from '@/utils/validate.js'
	import dictionaryType from '../components/dictionaryType.vue'
	import addKeyWord from '../components/addKeyWord/addKeyWord.vue'
	import wordSearch from '../components/wordSearch/wordSearch.vue'
	import {
		ShopRentDetailApiNoDw,
		informationAdd,
		editInfo
	} from "@/api/subletOfShop.js"
	import {
		toPage,
		getCategory
	} from '@/filters/commFilter.js'
	import {
		ProjectList
	} from '@/api/subletOfShop.js';
	import ImageInstance from '../components/ImageInstance.vue'
	import Uselect from '../components/select.vue'
	import chooseKeywords from '../components/chooseKeywords.vue'
	import payType from './payType.vue'
	import chooseContact from '../components/chooseContact.vue'
	import chooseComp from './chooseComp.vue'
	import imageComp from '@/components/imageComp/index.vue'
	export default {
		components: {
			dictionaryType,
			ImageInstance,
			Uselect,
			addKeyWord,
			wordSearch,
			chooseKeywords,
			payType,
			chooseContact,
			chooseComp,
			imageComp
		},
		props: ['categoryOn', 'typeOn', 'editId', 'patientinfo', 'st', 'storeCategory'],
		data() {
			return {
				projectName: '',
				floor1: '1', //层数
				floor2: '1', //总共层
				addres: this.$address, //商铺地址
				bvileAvea: '', //产权面积
				avea: '', //使用面积
				salemoney: '', //单价
				sellOunt: '', //总价
				returnInvestment: '', //投资回报率
				title: '', //标题
				contactList: [],
				advantages: [], //店铺特点
				advantageIds: [],
				maxLength: 200,
				details: '',
				projectList: [],
				projectIndex: 0,
				projectName: '',
				shopIndex: 0,
				shopName: '',
				dataform: {
					shopfrontPhoto:''
				},
				shopList: [{
					id: 1,
					name: '营业中'
				}, {
					id: 2,
					name: '空置中'
				}, {
					id: 3,
					name: '已签约'
				}, {
					id: 4,
					name: '装修中'
				}],
				// 1.营业中2.空置3.已签约4.装修中
				PhotoList: [],
				storeAdvantage: [],
				modePayment: '',
				shopSaleCdata: {},
				popupShow: false,
				projectId: '',
				location: {},
				status: 0,
				isToSave: false,
				businessName: '',
				businessCircle: '',
				openPopupShow: false,

			}
		},

		mounted() {
			this.getProjectList('');
			this.shopIndex = 1;
			this.shopName = this.shopList[1].name
			let that = this
			if (this.editId) {
				this.getDetail()
			} else {
				that.getBusiness(that.$location)
			}
			that.location = that.$location
			uni.$on('shopSaleC', function(data) {
				this.shopSaleCdata = data
			})
			this.dataform.city = this.$cityCode ? this.$cityCode[1] : ''
			this.dataform.province = this.$cityCode ? this.$cityCode[0] : ''
			this.dataform.district = this.$cityCode ? this.$cityCode[2] : ''
			getApp().globalData.initContact()
		},
		watch: {
			categoryOn(val) {
				this.fillTitle()
			},
			avea() {
				this.fillTitle()
			},
			patientinfo: {
				handler: function(newV, oldV) {
					console.log("newV", newV)
					if (newV && Object.keys(newV).length > 0) {
						this.dataform = {
							...this.dataform,
							...newV
						}
						this.dataform.bvileAvea = this.dataform.floorage
						this.bvileAvea = this.dataform.floorage

						let d = this.dataform;
						getApp().globalData.fbDeal(d, this)

						this.supportingFacility = this.dataform.supportingName;
						this.storefrontTypeName = this.dataform.storefrontName
						this.floor = this.dataform.floor[0].split('-')
						this.floor1 = this.floor[0]
						this.floor2 = this.floor[1]
						this.avea = this.dataform.avea
						// that.dataform.shopfrontPhoto && (that.PhotoList = that.dataform.shopfrontPhoto.split(','))
						console.log(this.dataform)
					}
				},
				deep: true,
			}
		},
		onShow() {
			if (this.status == 1) {
				uni.navigateBack();
			}
		},
		methods: {
			jisuan() {
				if (this.salemoney && this.bvileAvea) {
					this.sellOunt = this.salemoney * this.bvileAvea;
				}
			},
			toDel(index, info, callback) {
				if (info) {
					this.contactList.splice(index, 1, info);
				} else {
					this.contactList.splice(index, 1);
				}
				callback && callback();
			},
			projectClick() {
				this.$refs.wordSearch.open = true
			},
			//添加配套要求
			addAd() {
				this.$refs.addKeyWord.popupShow = true
			},
			addConfirm(e) {
				this.advantages = this.advantages.concat(e)
			},
			//查看图片示例
			getImage() {
				this.$refs.ImageInstance.show = true
			},
			//上传照片
			uploadImg() {
				uni.showActionSheet({
					title: '选择上传类型',
					itemList: ['图片', '视频'],
					success: res => {
						if (res.tapIndex == 0) {
							this.chooseImages();
						} else {
							this.chooseVideo();
						}
					}
				});
			},
			//自动填充标题
			fillTitle() {
				if (this.editId && this.title) {
					return;
				}
				const category = getCategory(this.categoryOn).name;
				this.title = this.bvileAvea ? '出售' + (this.businessName ? this.businessName : '') + this.bvileAvea + '㎡' + category :
					this.title;
				this.$forceUpdate()
			},
			//确认选择支付方式
			clickOk(val) {
				this.popupShow = false;
				this.modePayment = val.map(item => {
					return item.describe
				}).join(',')
				this.openPopupShow = false
			},
			//选择照片
			// chooseImages() {
			// 	let that = this;
			// 	that.$util.uploadImageOne({
			// 		url: 'upload/image',
			// 		count: 5,
			// 		name: 'multipart',
			// 		model: "user",
			// 		pid: 0
			// 	}, function(res) {
			// 		// console.log(res)
			// 		that.PhotoList.push({
			// 			url: res.data.url,
			// 			type: 'image'
			// 		})
			// 	});
			// },
			// //选择视频
			// chooseVideo() {
			// 	let that = this;
			// 	that.$util.uploadVideo({
			// 		url: 'upload/image',
			// 		name: 'multipart',
			// 		model: "user",
			// 		pid: 0
			// 	}, function(res) {
			// 		// console.log(res)
			// 		that.PhotoList.push({
			// 			url: res.data.url,
			// 			type: 'video'
			// 		})
			// 	});

			// },
			openChange(row, index) {
				row.open = index
			},
			deleteContact(index) {
				this.contactList.splice(index, 1)
			},
			//获取项目列表
			async getProjectList(name) {
				try {
					const {
						data
					} = await ProjectList({
						name
					});
					this.projectList = data.list;
				} catch (e) {
					//TODO handle the exception
				}
			},
			clickMap(success) {
				let that = this;
				uni.chooseLocation({
					success: (res) => {
						this.addres = res.address
						that.$set(that.location, 'latitude', res.latitude)
						that.$set(that.location, 'longitude', res.longitude)
						that.getBusiness({
							longitude: res.longitude,
							latitude: res.latitude,
						})
					},
				})
			},
			getBusiness(location) {
				let that = this;
				getApp().globalData.getBusinessList(location).then(res => {
					if (res.code == 200) {
						console.log("定位获取到的商圈", res)
						that.dataform.province = res.data.province;
						that.dataform.city = res.data.city;
						that.dataform.district = res.data.district;
						that.businessName = res.data.businessName;
						that.businessCircle = res.data.businessId;
						that.fillTitle()
					}
				});
			},
			formSubmit: Debounce(function(e) {
				let that = this
				if (this.isToSave) {
					uni.navigateBack();
					return;
				}
				if (!that.addres) return that.$util.Tips({
					title: '请输入/选择地址'
				});
				if (!that.bvileAvea) return that.$util.Tips({
					title: '请输入产权面积'
				});
				if (!that.avea) return that.$util.Tips({
					title: '请输入使用面积'
				});
				if (!that.shopName) return that.$util.Tips({
					title: '请选择商铺状态'
				});
				if (!that.dataform.payType) return that.$util.Tips({
					title: '请输入付款方式'
				});
				if (!that.contactList || that.contactList.length == 0) return that.$util.Tips({
					title: '请输入联系人'
				});
				e.detail.value.addres = that.addres
				e.detail.value.businessCircle = that.businessCircle
				e.detail.value.floor = that.floor1 + '-' + that.floor2
				e.detail.value.businessStatus = that.shopList[that.shopIndex].id + ''
				// e.detail.value.projectId = that.projectId
				// e.detail.value.shopfrontPhoto = that.PhotoList ? that.PhotoList.map(item => item.url).join(",") :
					''
				e.detail.value.storeAdvantage = that.storeAdvantage.join('/');
				// this.dataform.modePayment = that.modePayment;
				e.detail.value.contacts = that.contactList.map(item => {
					const {
						id,
						type,
						open,
						were
					} = item;
					return {
						contactId: id,
						identity: type,
						open,
						were
					}
				})
				Object.keys(that.shopSaleCdata).forEach((item) => {
					e.detail.value[item] = that.shopSaleCdata[item] ? that.shopSaleCdata[item] : ''
				})
				e.detail.value.storeCategory = getCategory(that.categoryOn).value
				if (that.typeOn == 3) {
					e.detail.value.status = '1'
				}
				e.detail.value = {
					...this.dataform,
					...e.detail.value,
					...that.location
				}
				e.detail.value.id = this.editId
				this.isToSave = true;
				if (this.editId) {
					editInfo(e.detail.value).then(res => {
						if (res.code == 200) {
							if (this.status == 1) {
								that.continueFillIn(res.data.id);
							} else {
								this.$util.Tips({
									title: '编辑成功'
								}, {
									tab: 3
								})
								// uni.navigateBack()

							}
						} else {
							this.isToSave = false;
						}
					})
				} else {
					e.detail.value = {
						...e.detail.value
					}
					informationAdd(e.detail.value).then(res => {
						if (res.code == 200) {
							if (this.status == 1) {
								that.continueFillIn(res.data.id);
							} else {
								let that = this;
								this.$util.Tips({
									title: '发布完成'
								}, {
									tab: 2,
									url: '/pages/releases/rentalStores/rentalStores'
								})
							}
						} else {
							this.isToSave = false;
						}
					})
				}

				// informationAdd(e.detail.value).then(res => {
				// 	if (res.code == 200) {
				// 		that.$util.Tips({
				// 			title: '发布成功'
				// 		}, {
				// 			tab: 2,
				// 			url: '/pages/releases/rentalStores/rentalStores'
				// 		})
				// 		// uni.switchTab({
				// 		// 	url: '/pages/releaseInformation/releaseInformation'
				// 		// })
				// 	}
				// })
			}),
			PickerChange(e) {
				this.projectIndex = e.detail.value
				this.projectName = this.projectList[this.projectIndex].name
			},
			shopChange(e) {
				this.shopIndex = e.detail.value
				this.shopName = this.shopList[this.shopIndex].name
			},
			continueFillIn(id) {
				// 商铺出租资料完善
				uni.navigateTo({
					url: '/pages/releases/continueFillin/shopSaleC?id=' + id
				})
			},
			//删除标签
			closeAdvantages(item, index) {
				this.advantages.splice(index, 1)
				if (this.advantageIds.indexOf(index) != -1) {
					let idx = this.advantageIds.indexOf(index)
					this.advantageIds.splice(idx, 1);
					this.storeAdvantage.splice(index, 1)
				}
			},
			advantageChecked(item, index) {
				if (this.advantageIds.indexOf(index) != -1) {
					let idx = this.advantageIds.indexOf(index)
					this.advantageIds.splice(idx, 1);
					this.storeAdvantage.splice(item, 1)
				} else {
					this.advantageIds.push(index);
					this.storeAdvantage.push(item)
				}
			},
			addContact() {
				uni.navigateTo({
					url: '/pages/releases/addShopContact/addShopContact'
				})
			},
			getDetail() {
				ShopRentDetailApiNoDw(this.editId, {
					status: this.st,
					storeCategory: this.storeCategory
				}).then(res => {
					// console.log('editShop', res)
					if (res.code == 200) {
						this.dataform = res.data
						let notFiled = ['storeAdvantage', 'contacts', 'shopfrontPhoto', 'businessStatus']
						
						for (let k in this.dataform) {
							if (this.hasOwnProperty(k)) {
								if (notFiled.indexOf(k) == -1) {
									this[k] = this.dataform[k]
								}
							}
						}
						if (this.dataform.contacts && this.dataform.contacts.length > 0) {
							this.contactList = this.dataform.contacts.map(item => ({
								...item,
								username: item.contactName,
								phone: item.contactPhone,
								id: item.contactId,
								type: item.contactType
							}))
							delete this.dataform.contacts
						}
						this.dataform.storeAdvantage && this.dataform.storeAdvantage.split('/').forEach((item,
							index) => {
							let ind = this.advantages.indexOf(item);
							if (ind == -1) {
								this.advantages.push(item)
								this.storeAdvantage.push(item)
								this.advantageIds.push(this.advantages.length - 1)
							} else {
								this.advantageIds.push(ind)
								this.storeAdvantage.push(this.advantages[ind])
							}

						})

						// console.log('this.dataform.businessStatus',this.dataform.businessStatus)
						if (this.dataform.businessStatus) {
							this.shopList.forEach((item, index) => {
								if (this.dataform.businessStatus == item.id) {
									this.shopName = item.name;
									this.shopIndex = index
								}
							})

						}

						// if (this.dataform.shopfrontPhoto) {
						// 	this.dataform.shopfrontPhoto.split(',').forEach(item => {
						// 		this.PhotoList.push({
						// 			url: item.url,
						// 			type: 'image'
						// 		})
						// 	})

						// }

						// console.log(this.projectName)
						// this.supportingFacility = this.dataform.supportingFacility
						// this.groupCurrentName = this.dataform.groupCurrent
						// this.workingGroupName = this.dataform.workingGroup

					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '/static/css/releaseForm.css';
</style>